<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>角色管理</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
  <script src="../plugins/ElementUI/index-2.3.9.js"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
</head>
<body>
  <div id="app" v-cloak v-show="addShow" class="animated fadeInRight">
    <div>
      <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="NewAdd" v-show="resourceMap.saveRoleResource">新增</el-button>
      <el-button type="primary" size="small" icon="el-icon-delete" @click="onSelectDel" v-show="resourceMap.deleteRoleResource">删除选中</el-button>
    </div>
    <br>
    <el-button type="text">注：双击单元行显示权限详情</el-button>
    <el-row>
      <el-col :span="12">
        <el-table :data="tableData.list" border ref="singleTable" :max-height="windowHeight" size="small" style="width: 100%" @selection-change="handleSelectionChange" highlight-current-row
         @row-dblclick="handleCurrentChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" ></el-table-column>
          <el-table-column prop="role" label="角色" width="88"> </el-table-column>
          <el-table-column prop="roleName" label="中文描述" width="128"> </el-table-column>
          <el-table-column prop="gmt_modified" sortable label="修改时间" ></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-form style="width: 500px">
          <el-row>
            <el-col :span="12">
                <el-form-item label="用户角色：" :label-width="formLabelWidth">
                  <el-input v-model="userChecked.userRole" disabled size="small"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="中文描述：" :label-width="formLabelWidth">
                  <el-input v-model="userChecked.roleName"  size="small"></el-input>
                </el-form-item>
            </el-col>
          </el-row>                    
          <el-form-item id="treeH" label="角色权限：" :label-width="formLabelWidth" :style="computeStyle">
            <el-tree
              :data="data2"
              show-checkbox
              node-key="id"
              ref="tree"
              default-expand-all
              :default-checked-keys="userChecked.checked"
              :props="defaultProps">
            </el-tree>
          </el-form-item>
          <div style="padding-left: 52px;">
            <el-button type="primary" @click="updatedSubmit" size="small" v-show="resourceMap.updateRoleResource">保存修改</el-button>
          </div>
        </el-form>
      </el-col>
    </el-row>
    <!-- dialog NewAdd -->
    <el-dialog title="角色管理" :visible.sync="dialogNewAdd">
      <el-form :model="dialogNewAddForm">
        <el-row>
          <el-col :xs="24" :sm="12" :lg="12">
            <el-form-item label="用户角色(En)" :label-width="formLabelWidth">
              <el-input v-model="dialogNewAddForm.userRole" clearable size="small" placeholder="例：admin"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12">
            <el-form-item label="解释说明(CN)" :label-width="formLabelWidth">
              <el-input v-model="dialogNewAddForm.roleName" clearable size="small" placeholder="例：管理员"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <el-tree
            :data="data1"
            show-checkbox
            node-key="id"
            ref="tree1"
            :props="defaultProps">
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewAdd = false" size="small">取 消</el-button>
        <el-button type="primary" @click="newAddSubmit" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          addShow:false,
          resourceMap:storageLocal.getName('role'),
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick:function(picker) {
                var end = new Date();
                var start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick:function(picker) {
                var end = new Date();
                var start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick:function(picker) {
                var end = new Date();
                var start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          tableData: [],
          dialogNewAdd: false,
          dialogNewAddForm: {checked:[],userRole:"",roleName:""},
          formLabelWidth: '120px',
          windowHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 200,
          treeHeight:"",
          multipleSelection:[],
          currentPage:1,
          pageSize:50,
          data1: [],
          data2: [],
          userChecked:{checked:[],userRole:"",roleId:-1,roleName:""},
          defaultProps: {
            children: 'children',
            label: 'label'
          }
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.requestModel()
        })
      },
      updated:function(){
        this.addShow = true
      },
      computed: {
        computeStyle:function() {
          if(this.treeHeight>this.windowHeight-50){
            return {height:this.windowHeight-50 + 'px',overflowY:'scroll'}
          }
        }
      },
      methods: {
          NewAdd:function(){
            this.dialogNewAddForm = {checked:[],userRoleEn:"",userRoleCn:""}
            this.dialogNewAdd = true
            resourceRequst("/role/queryAllResourceByRole",{},function(res){
              vm.data1 = res.allResource
            })
          },
          onSubmit:function() {//查询提交
            this.currentPage = 1;
            this.requestModel()
          },
          handleSelectionChange:function(val){  
            this.multipleSelection = val;
          },
          newAddSubmit:function(){//新增用户 -- 提交
            var keys = this.$refs.tree1.getCheckedKeys();
            var key = _.filter(keys,function(item){
              return item !== undefined
            })
            var data = {
              resourceID:key.join(";"),
              role:this.dialogNewAddForm.userRole,
              roleName:this.dialogNewAddForm.roleName
            }
            resourceRequst("/role/saveRoleResource",data,function(res){
                // vm.tableData.list.unshift(res.getResult);
                vm.$message({
                  message: '添加成功',
                  type: 'success'
                });
                vm.dialogNewAdd = false;
                vm.requestModel()
            })
          },
          updatedSubmit:function(){//更新用户 -- 提交
            var keys = this.$refs.tree.getCheckedKeys();
            var key = _.filter(keys,function(item){
              return item !== undefined
            })
            var data = {
              id:this.userChecked.roleId,
              resourceID:key.join(";"),
              role:this.userChecked.userRole,
              roleName:this.userChecked.roleName
            }
            resourceRequst("/role/updateRoleResource",data,function(res){
              console.log(res)
              vm.$message({message: '修改成功',type: 'success'});
              // vm.requestModel()
            })
          },
          onSelectDel:function() {//删除操作
            if(this.multipleSelection.length == 0){
              this.$message({ showClose: true, message: '提示，还未选中对象', type: 'warning', duration:1500 });
              return
            }
            var arry = _.map(vm.multipleSelection, function(num){ 
              return num.id; 
            });
            
            this.$alert('此操作将删除选中数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              showCancelButton:true,
              type: 'warning',
              callback: function(action){
                if (action == "confirm") {
                  var data = {allKeys:arry}
                  resourceRequst("/role/deleteRoleResource",data,function(res){
                    vm.$message({ type: 'success', message: "删除成功！" });
                    vm.requestModel()
                  })
                }
              }
            });
          },
          newAddTree:function() {//新建---tree
            var data = {role:""};
            resourceRequst("/role/queryAllResourceByRole",data,function(res){
              vm.data2 = res.allResource
              vm.userChecked.checked = res.idInUse
              // 
              vm.userChecked.roleId = val.id
              vm.userChecked.userRole = val.role
            })
          },
          handleCurrentChange:function(val) {//双击编辑
            this.setCurrent(val)
            var data = {role:val.role};
            resourceRequst("/role/queryAllResourceByRole",data,function(res){
              vm.data2 = res.allResource
              vm.userChecked.checked = res.idInUse
              // 
              vm.userChecked.roleId = val.id
              vm.userChecked.userRole = val.role
              vm.userChecked.roleName = val.roleName 
              
              setTimeout(function(){
                vm.treeHeight = document.getElementById("treeH").scrollHeight
              }, 10);
            })
          },
          setCurrent:function(row){//默认选中第n行
            this.$refs.singleTable.setCurrentRow(row);
          },
          requestModel:function(){//查询所有角色
            resourceRequst("/role/queryRoleResource",{},function(res){
                vm.tableData = res.getResult
                setTimeout(function(){
                  var list = vm.tableData.list[0]
                  vm.handleCurrentChange(list)
                },0)
            },true)
          }
      }
    })
  </script>
</html>